<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <link rel="stylesheet" type="text/css" href="../layui/css/layui.css"/>
    <link rel="stylesheet" type="text/css" href="../font-awesome-4.7.0/css/font-awesome.min.css"/>
    <title></title>
    <style type="text/css">
        #addUserModel {
            padding: 10px;
            display: none;
        }

    </style>
    <script>
        function deleteUser() {
            var checkStatus = layui.table.checkStatus('userInfoTab'); //idTest 即为基础参数 id 对应的值

           if(checkStatus.data.length == 0){
               layui.layer.alert("请选择数据",{"icon":2});
               return;
           }

           var userIds = new Array();
           for(var i = 0; i < checkStatus.data.length; i++){
               userIds.push(checkStatus.data[i].userId);
           }
           layui.$.ajax({
               url:"http://127.0.0.1:8080/user/batchDelete",
               method:"delete",
               data: {
                   "userIds": userIds.join()
               },
               success:function (data) {
                   layui.table.reload("userInfoTab",{
                       where:{
                           userName:layui.$("input[name='searchName']").val()
                       }
                   });
               }
           });
        }

        function searchUser(){
            layui.table.reload("userInfoTab",{
                where:{
                    userName:layui.$("input[name='searchName']").val()
                }
            });
        }

        function exportExcel(){
            //此处模拟a标签点击
            var a = document.createElement("a");
            a.href = "http://127.0.0.1:8080/user/export?userName="+layui.$("input[name='searchName']").val();
            document.body.append(a);
            a.style.display = "none";
            a.click();
        }

        function importExcel(){
            uploadExcle = layui.layer.open({
                type:1,
                title:"导入数据",
                content:layui.$("#uploadDialog")
            });
        }

        function showEditModel(){
            var checkStatus = layui.table.checkStatus('userInfoTab'); //idTest 即为基础参数 id 对应的值


            if(checkStatus.data.length == 0){
                layui.layer.alert("请选择数据",{"icon":2});
                return;
            }

            if(checkStatus.data.length > 1){
                layui.layer.alert("请选择一条数据",{"icon":2});
                return;
            }



            layui.$.ajax({
                url:"http://127.0.0.1:8080/user/selectById/"+checkStatus.data[0].userId,
                method:"get",
                success:function (result){
                    console
                    layui.$("#updateUserModel input[name='userId']").val(result.data.userId);
                    layui.$("#updateUserModel input[name='userName']").val(result.data.userName);
                    layui.$("#updateUserModel input[name='userPwd']").val(result.data.userPwd);
                    layui.layer.open({
                        title:"编辑用户",
                        type:1,
                        content:layui.$("#updateUserModel")
                    });

                }
            });


        }
    </script>

</head>
<body>

<div class="layui-upload-drag" id="uploadDialog" style="display: none">
    <i class="layui-icon"></i>
    <p>点击上传，或将文件拖拽到此处</p>
    <div class="layui-hide" id="uploadDemoView">
        <hr>
        <img src="" alt="上传成功后渲染" style="max-width: 196px">
    </div>
</div>
<div style="display: flex;justify-content: space-between">
    <div>
        <button class="layui-btn" onclick="showAddModel()"><i class="fa fa-plus"></i> 添加</button>
        <button class="layui-btn layui-btn-danger" onclick="deleteUser()"><i class="fa fa-minus"></i> 删除</button>
        <button class="layui-btn layui-btn-warm" onclick="showEditModel()"><i class="fa fa-edit"></i> 编辑</button>
        <button class="layui-btn layui-btn-normal" onclick="exportExcel()"><i class="fa fa-arrow-right"></i> 导出</button>
        <button class="layui-btn layui-btn-warm" onclick="importExcel()"><i class="fa fa-arrow-left"></i> 导入</button>
    </div>
    <div style="display: flex">
        <input type="text" placeholder="按照用户名搜索" name="searchName"/>
        <button class="layui-btn" onclick="searchUser()"><i class="fa fa-search"></i></button>
    </div>

</div>
<table class="layui-table" id="userInfoTab"></table>

<div id="addUserModel">

    <form class="layui-form layui-form-pane" action="">
        <div class="layui-form-item">
            <label class="layui-form-label">用户名</label>
            <div class="layui-input-block">
                <input type="text" name="userName" lay-verify="verifyUserName" autocomplete="off" placeholder="请输入用户名"
                       class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">密码</label>
            <div class="layui-input-block">
                <input type="password" name="userPwd" lay-verify="verifyUserPwd" autocomplete="off" placeholder="请输入密码"
                       class="layui-input">
            </div>
        </div>

<!--        <div class="layui-form-item" pane="">-->
<!--            <label class="layui-form-label">性别</label>-->
<!--            <div class="layui-input-block">-->
<!--                <input type="radio" name="userSex" value="男" title="男">-->
<!--                <input type="radio" name="userSex" value="女" title="女">-->
<!--            </div>-->
<!--        </div>-->

<!--        <div class="layui-form-item">-->
<!--            <label class="layui-form-label">年龄</label>-->
<!--            <div class="layui-input-block">-->
<!--                <input type="number" name="userAge" lay-verify="verifyUserPwd" autocomplete="off" placeholder="请输入年龄"-->
<!--                       class="layui-input">-->
<!--            </div>-->
<!--        </div>-->

        <div class="layui-form-item" style="text-align: center;">
            <button class="layui-btn" lay-submit lay-filter="addUserBtn">添加</button>
            <button class="layui-btn">取消</button>
        </div>
    </form>
</div>

<div id="updateUserModel" style="display: none; padding: 10px">

    <form class="layui-form layui-form-pane" action="">
        <input type="hidden" name="userId">
        <div class="layui-form-item">
            <label class="layui-form-label">用户名</label>
            <div class="layui-input-block">
                <input type="text" name="userName" lay-verify="verifyUserName" autocomplete="off" placeholder="请输入用户名"
                       class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">密码</label>
            <div class="layui-input-block">
                <input type="password" name="userPwd" lay-verify="verifyUserPwd" autocomplete="off" placeholder="请输入密码"
                       class="layui-input">
            </div>
        </div>

<!--        <div class="layui-form-item" pane="">-->
<!--            <label class="layui-form-label">性别</label>-->
<!--            <div class="layui-input-block">-->
<!--                <input type="radio" name="userSex" value="男" title="男">-->
<!--                <input type="radio" name="userSex" value="女" title="女">-->
<!--            </div>-->
<!--        </div>-->

<!--        <div class="layui-form-item">-->
<!--            <label class="layui-form-label">年龄</label>-->
<!--            <div class="layui-input-block">-->
<!--                <input type="number" name="userAge" lay-verify="verifyUserPwd" autocomplete="off" placeholder="请输入年龄"-->
<!--                       class="layui-input">-->
<!--            </div>-->
<!--        </div>-->

        <div class="layui-form-item" style="text-align: center;">
            <button class="layui-btn" lay-submit lay-filter="updateUserBtn">提交</button>
            <button class="layui-btn">取消</button>
        </div>
    </form>
</div>
</body>
<script src="../layui/layui.all.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
    (function (){
        //拖拽上传
        layui.upload.render({
            elem: '#uploadDialog'
            ,url: 'http://127.0.0.1:8080/user/importExcel' //改成您自己的上传接口
            ,accept: 'file' //普通文件
            ,exts: 'xls|excel|xlsx' //只允许上传excel文件
            ,done: function(res){
                layer.msg('上传成功');
                //关闭上传模态框
                layui.layer.close(uploadExcle);
                //重新加载数据
                layui.table.reload("userInfoTab",{
                    where:{
                        userName:layui.$("input[name='searchName']").val()
                    }
                });
            }
        });
    })();
    layui.table.render({
        elem: '#userInfoTab'
        , url: 'http://127.0.0.1:8080/user/selectByPage'
        , cellMinWidth: 80 //全局定义常规单元格的最小宽度，layui 2.2.1 新增
        , cols: [[
            {type: 'checkbox'}
            , {field: 'userId', title: 'ID', sort: true}
            , {field: 'userName', title: '用户名',width:150} //width 支持：数字、百分比和不填写。你还可以通过 minWidth 参数局部定义当前单元格的最小宽度，layui 2.2.1 新增
            , {field: 'userPwd', title: '密码'}
            // , {field: 'userSex', title: '性别'}
            // , {field: 'userAge', title: '年龄', sort: true}
            , {field: 'createTime', title: '创建时间', align: 'center',width:200} //单元格内容水平居中
            , {field: 'updateTime', title: '更新能时间', align: 'right',width:200} //单元格内容水平居中
            , {field: 'delStatus', title: '状态', sort: true, align: 'right'}
        ]]
		,page: true
		,limit: 10
		,limits:[3,5,10,15]
        , parseData: function (res) { //res 即为原始返回的数据
            return {
                "code": res.code, //解析接口状态
                "msg": res.msg, //解析提示文本
                "count": res.data.count, //解析数据长度
                "data": res.data.data //解析数据列表
            };
        }
        , request: {
            pageName: 'pageNum' //页码的参数名称，默认：page
            , limitName: 'pageSize' //每页数据量的参数名，默认：limit
        }
    });
</script>
<script type="text/javascript">
    function showAddModel() {
       addUserModelDialog =  layui.layer.open({
            type: 1,
            title: "添加用户信息",
            shadeClose: true, //点击遮罩关闭
            content: layui.$("#addUserModel")
        });
    }

    (function () {

        layui.form.on('submit(addUserBtn)', function(data){
           layui.$.ajax({
               method:"post",
               url:"http://127.0.0.1:8080/user/insert",
               data:{
                   "userName":data.field.userName,
                   "userPwd":data.field.userPwd,
                   // "userSex":data.field.userSex,
                   // "userAge":data.field.userAge
               },
               success:function (data) {
                   layui.table.reload("userInfoTab",{
                       where:{
                           userName:layui.$("input[name='searchName']").val()
                       }
                   });
               }
           });
        });
        layui.form.on('submit(updateUserBtn)', function(data){
            layui.$.ajax({
                method:"put",
                url:"http://127.0.0.1:8080/user/update",
                data:{
                    "userId":data.field.userId,
                    "userName":data.field.userName,
                    "userPwd":data.field.userPwd,
                    // "userSex":data.field.userSex,
                    // "userAge":data.field.userAge
                },
                success:function (data) {
                    layui.table.reload("userInfoTab",{
                        where:{
                            userName:layui.$("input[name='searchName']").val()
                        }
                    });
                }
            });
        });
        layui.form.verify({
            verifyUserName: function (value) {
                if (value.length < 5) {
                    return "用户名不能小于五位";
                }
            },
            verifyUserPwd: function (value) {
                if (value.length == 0) {
                    return "密码不能为空";
                }
            },
            verifyCode: function (value) {
                if (value.length == 0) {
                    return "验证码不能为空";
                }
            }
        });
    })();
</script>
</html>
